<template>
	<view style="padding: 20px;min-height: 100.1vh">
		<view style="width: 100%;background-color: #fff;border-radius: 15rpx;height: 500rpx;padding: 40rpx;">
			<view style="height: 80rpx;width: 100%;display: flex;">
				<view style="display: flex;height: 70rpx;justify-content: space-between;">
					<view style="display: flex;">
						<image src="../../static/images/0421-30.png"
							style="width: 50rpx;height: 40rpx;margin-top: 10rpx;"></image>
						<view style="width: 150rpx;margin-left: 5rpx;">
							<view style="font-size: 24rpx;height: 70rpx;line-height: 70rpx;">报警统计</view>
						</view>
					</view>
					<view style="width: 410rpx;">
						<uni-datetime-picker :clearIcon="false" v-model="range" type="daterange" @change="change"
							@maskClick="maskClick" />
					</view>
				</view>

			</view>

			<view>
				<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view style="width: 100%;border-radius: 10rpx;height: 100%;padding: 20rpx;">告警问题列表</view>
		<view v-for="(item,index) in alarmData" :key="index" @click="gotoPage('/pages/index/editAlarm',item)"
			style="background-color: #fff;width: 100%;height: 100%;justify-content: space-between;border-radius: 15rpx;margin-bottom: 20rpx;">
			<view style="margin-bottom: 40rpx;border-radius: 5rpx;padding:0rpx 20rpx;width: 100%;">
				<view style="display:flex;">

					<view style="margin: 30rpx 20rpx;width: 100%;">
						<view style="display: flex;margin-bottom: 10rpx;">
							<view style="font-size: 26rpx;color: #A8A8A8;width: 85%;">
								{{item.alarm}}编号：{{item.serialNumber}}
							</view>
							<view style="width: 15%;">
								<view v-if="item.status == '未处置'"
									style="color: #D63F37;font-size: 26rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #FAEFEE;border-radius: 5rpx;">
									{{item.status}}
								</view>
								<view v-else
									style="color: #3F92FA;font-size: 26rpx;width: 100%;padding:5rpx 5rpx ;text-align: center;font-weight: 400;background-color: #F5F5FF;border-radius: 5rpx;">
									{{item.status}}
								</view>
							</view>
						</view>
						<view style="border-bottom: 1rpx solid #ececec;"></view>

						<view style="margin-top: 20rpx;font-size: 26rpx;">{{item.device}}({{item.deviceType}})</view>
						<view style="margin-top: 10rpx;font-size: 24rpx;">报警分类：{{item.excessFactor}}
							<span v-if="item.excessFactor !='设备状态'">
								<span style="margin-left:15rpx;color: #D63F37;">{{item.realValue}}</span>
								<uni-icons v-if="item.realValue !='离线' && getNum(item.standardValue) >item.realValue" type="arrow-down" size="15"
									color="#D63F37"></uni-icons>
									<uni-icons v-if="item.realValue !='离线' && getNum(item.standardValue) <item.realValue" type="arrow-up" size="15"
										color="#D63F37"></uni-icons>
								<span v-if="item.realValue !='离线'"
									style="margin-left:15rpx;color: #A8A8A8;">({{item.standardValue}}{{item.unit}})</span>
							</span>

						</view>
						<view style="margin-top: 15rpx;color: #A8A8A8;font-size: 22rpx;">{{changeTime(item.updateTime)}}
						</view>
					</view>


				</view>
			</view>
		</view>
		<view v-if="isFinish" style="text-align: center;">加载更多</view>
		<view v-if="isNoMore" style="text-align: center;">——没有更多数据啦——</view>
	</view>
</template>

<script>
	import {
		queryWarningDeal
	} from "@/api/index"
	export default {

		data() {
			return {
				range: ['2021-02-1', '2021-3-28'],
				start: Date.now() - 1000000000,
				end: Date.now() + 1000000000,
				value: 3,

				chartData: {},
				alarmData: [],
				form: {},
				time: '',
				pageSize: 10,
				pageNum: 0,
				pageTotal: 0,
				isFinish: false,
				isNoMore: false,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#F98E62", "#4C66F4"],
					padding: [5, 5, 5, 5],
					dataLabel: true,
					enableScroll: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "88",
						fontSize: 25,
						color: "#666666"
					},
					subtitle: {
						name: "当前报警数",
						fontSize: 10,
						color: "#3d5a75"
					},
					extra: {
						ring: {
							ringWidth: 15,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 0.1,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		onReady() {

			this.getTime();
			this.getServerData();
		},
		methods: {
			maskClick(e) {
				this.range = e
				console.log('maskClick事件:', e);
				this.getServerData();
			},
			change(e) {
				this.range = e
				this.getServerData();
				console.log('change事件:', e);
			},

			getServerData() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				this.form.mode = this.value
				this.form.beginTime = this.range[0]
				this.form.endTime = this.range[1]
				this.form.pageNum = this.pageNum
				this.form.pageSize = this.pageSize
				queryWarningDeal(this.form).then(response => {
					// 使用示例
					console.info('aaaaa', response)
					this.alarmData = response;
					let unprocessedCount = 0;
					let totalCount = response.length;
					this.opts.title.name = response.length;
					if (response.length > 0) {
						console.info('ttttttttt1tttttttttt', response);
						for (let obj in response) {
							if (response[obj].status === "未处置") {
								unprocessedCount++;
							}
						}
					}
					console.info('ttttttttt3tttttttttt', unprocessedCount);

					let res = {
						series: [{
							data: [{
								"name": "未处置",
								"value": unprocessedCount
							}, {
								"name": "已处置",
								"value": totalCount - unprocessedCount
							}]
						}]
					};
					console.info('ttttttttt4tttttttttt', res);
					this.chartData = JSON.parse(JSON.stringify(this.createChartData(unprocessedCount,
						totalCount - unprocessedCount)));
					this.isFinish = false;
					this.alarmData = this.alarmData.concat(warningDealList.rows);
					this.pageTotal = totalCount;
					if (this.pageTotal <= this.pageNum * this.pageSize) {
						this.isNoMore = true;
					}
					setTimeout(function() {
						uni.hideLoading();
					}, 500);
				})


			},
			createChartData(undisposed, disposed) {
				return {
					series: [{
						data: [{
							"name": "未处置",
							"value": undisposed
						}, {
							"name": "已处置",
							"value": disposed
						}]
					}]
				};
			},
			changeTime(e) {
				let date = new Date(e);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1，然后使用padStart方法补齐两位
				let day = date.getDate().toString().padStart(2, '0'); // 使用padStart方法补齐两位
				let hours = date.getHours().toString().padStart(2, '0'); // 获取小时并补齐两位数
				let minutes = date.getMinutes().toString().padStart(2, '0'); // 获取分钟并补齐两位数
				let second = date.getSeconds().toString().padStart(2, '0');
				let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${second}`;
				return formattedDate;
			},
			onNavigationBarButtonTap(e) {
				console.info("aaaaaaaaaaaa", e)
				uni.navigateTo({
					url: '/pages/index/addMaintenance'
				})
			},
			gotoPage(url, item) {
				console.log("--------", JSON.stringify(item))

				console.log("--------", url)
				uni.navigateTo({
					url: url + '?item=' + JSON.stringify(item)
				})
			},
			getTime() {
				const today = new Date();
				const year = today.getFullYear();
				const month = today.getMonth(); // 月份从 0 开始，所以需要加 1
				const day = today.getDate();

				// 获取当前月份的第一天
				const firstDayOfMonth = new Date(year, month, 1);

				// 格式化日期
				const format = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};

				const startDate = format(firstDayOfMonth);
				const endDate = format(today);

				this.range = [startDate, endDate];
			},
			 getNum(str){
				 const regex = /\d+(\.\d+)?/g;
				   // 使用正则表达式提取数字，并返回结果数组
				return str.match(regex).map(Number)[0];
			 },// 下拉刷新
			onPullDownRefresh() {
				console.log('下拉刷新')
				this.getServerData();
				setTimeout(() => {
					console.log('下拉刷新停止')
					uni.stopPullDownRefresh()
				}, 2000)
			},
			// 上拉加载
			onReachBottom() {
				console.log('上拉加载')
				this.isFinish = true
				this.pageNum++;
				this.getServerData();

			},
		}
	}
</script>

<style lang="scss">
	.example-body {
		background-color: #fff;
		padding: 10px;
	}
</style>